{% extends "base.html" %}

{% block content %}
    <h2>{{ date }} 温度曲线</h2>
    <a href="{{ url_for('index') }}" class="back-btn">返回历史列表</a>
    
    {% for camera in cameras %}
    <div class="chart-container" style="margin-bottom: 50px; border-bottom: 1px solid #eee; padding-bottom: 20px;">
        <h3 style="margin-bottom: 20px;">相机 {{ camera.name }} 温度曲线</h3>
        <canvas id="chart-{{ camera.name }}" width="800" height="400"></canvas>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const ctx = document.getElementById('chart-{{ camera.name }}');
            if (ctx) {
                try {
                    new Chart(ctx, {
                        type: 'line',
                        data: {
                            labels: {{ camera.times|safe }},
                            datasets: [
                                {
                                    label: '设置温度',
                                    data: {{ camera.tempset|safe }},
                                    borderColor: 'rgb(255, 99, 132)',
                                    backgroundColor: 'rgba(255, 99, 132, 0.1)',
                                    borderWidth: 2
                                },
                                {
                                    label: '实际温度',
                                    data: {{ camera.tempact|safe }},
                                    borderColor: 'rgb(54, 162, 235)',
                                    backgroundColor: 'rgba(54, 162, 235, 0.1)',
                                    borderWidth: 2
                                }
                            ]
                        },
                        options: {
                            responsive: true,
                            animation: {
                                duration: 1000
                            },
                            plugins: {
                                title: {
                                    display: true,
                                    text: '{{ camera.name }} 温度变化曲线',
                                    font: {
                                        size: 16
                                    }
                                },
                                legend: {
                                    position: 'top'
                                }
                            },
                            scales: {
                                y: {
                                    title: {
                                        display: true,
                                        text: '温度 (°C)'
                                    },
                                    min: -30,
                                    max: 10
                                },
                                x: {
                                    title: {
                                        display: true,
                                        text: '时间'
                                    }
                                }
                            }
                        }
                    });
                } catch (e) {
                    console.error('初始化相机{{ camera.name }}图表失败:', e);
                }
            }
        });
    </script>
    {% endfor %}
{% endblock %}
